<!--已上架岗位列表-->
<template>
  <div style="width: 100vw ;background-color: #f7f9ff;padding: 20px">
    <div class="search-container">
      <el-input
          v-model="searchQuery"
          placeholder="请输入职位、公司或关键词"
          clearable
          @clear="handleClear"
          @keyup.enter="handleSearch"
      >
        <template #append>
          <el-button :icon="Search" @click="handleSearch" />
        </template>
      </el-input>
    </div>
    <div style="width: 60%;margin:  0 auto;background-color: #f7f9ff;text-align: left">
      <div class="property-item">
        <el-row :gutter="30" style="height: 60px;">
          <el-col :span="4" style="text-align: center;margin-top: 15px">
            学历要求：
          </el-col>
          <el-col :span="18" style="margin-top: 15px">
            <el-button style="border: none">不限</el-button>
            <el-button style="border: none">初中</el-button>
            <el-button style="border: none">高中</el-button>
            <el-button style="border: none">大专</el-button>
            <el-button style="border: none">本科</el-button>
            <el-button style="border: none">硕士</el-button>
            <el-button style="border: none">博士</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="property-item">
        <el-row :gutter="30" style="height: 60px;">
          <el-col :span="4" style="text-align: center;margin-top: 15px">
            经验要求：
          </el-col>
          <el-col :span="18" style="margin-top: 15px">
            <el-button style="border: none">不限</el-button>
            <el-button style="border: none">在校生</el-button>
            <el-button style="border: none">应届生</el-button>
            <el-button style="border: none">1年以内</el-button>
            <el-button style="border: none">1-3年</el-button>
            <el-button style="border: none">3-5年</el-button>
            <el-button style="border: none">5-10年</el-button>
            <el-button style="border: none">10年以上</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="property-item">
        <el-row :gutter="30" style="height: 60px;">
          <el-col :span="4" style="text-align: center;margin-top: 15px">
            薪资要求：
          </el-col>
          <el-col :span="18" style="margin-top: 15px">
            <el-button style="border: none">不限</el-button>
            <el-button style="border: none">3K以下</el-button>
            <el-button style="border: none">3-5k</el-button>
            <el-button style="border: none">5-10k</el-button>
            <el-button style="border: none">15-20k</el-button>
            <el-button style="border: none">20-30k</el-button>
            <el-button style="border: none">30-50k</el-button>
            <el-button style="border: none">50k以上</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="property-item">
        <div style="text-align: center" @click="">清除筛选条件</div>
      </div>
    </div>
    <el-card style=" height: 22%;width: 60%;margin:1% auto;text-align: left;" v-for="(item, index) in formattedJobList" :key="index">
      <el-row>
        <el-col :span="12">
          <p style="font-size: 20px;">{{ item.positionName+item.positionType + '('+ item.location + ')' }}</p>
          <span style="font-size: 15px;color:#888888;"><span style="color: #ec852c;font-size: 20px">{{ item.formattedSalary }}</span>&nbsp&nbsp&nbsp;经验{{ item.experience +'/学历'+item.education}}</span>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="5">
              <div style="width: 99%;height: 99%;border-radius: 15px;border: #cdcdcd 1px solid;justify-content: center; align-items: center;">
                <img :src="item.img" style="width: 100%;height: 100%;">
              </div>
            </el-col>
            <el-col :span="19" style="padding-left: 10px;">
              <p style="font-size: 20px;">{{ item.companyName }}</p>
              <p style="font-size: 15px;color:#888888;">{{ item.industry }}</p>
              <el-icon><User></User></el-icon>
              <span>{{ item.contact }}</span> |
              <el-icon><Iphone></Iphone></el-icon>
              <span>{{ item.phone }}</span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col :span="12">
          <el-tag type="primary">{{ item.publishDate }}</el-tag><span style="font-size: 15px;color:#888888;">发布时间</span>
        </el-col>
        <el-col :span="12" >
          <div style="float: right">
            <el-button  @click="showJobInfo(item.id)">查看岗位</el-button>
            <el-button type="primary" @click="addInterest">投一个呗</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <div style="margin: 0 auto;width: 57%;">
      <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 15, 20]"
          v-model:current-page="currentPage"
          v-model:page-size="currentSize"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>

</template>
<script setup>
import { computed } from 'vue'
import { House, User ,Iphone,Search } from '@element-plus/icons-vue'
import {onMounted, ref} from "vue"
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";
import router from "@/router";
import store from "@/store";
const emit = defineEmits(['']);
const showJobInfo=(jobListId)=>{
  const jobListData=jobList.value.find(item => item.id === jobListId);
  if (jobListData){
    store.commit('SET_CURRENT_JOB_INFO', jobListData)
    console.log('当前岗位数据已保存到 Vuex:', store.state.jobListData)
    router.push('/jobInfo')
  }
}
const handleSearch = () => {
  emit('search', searchQuery.value);
};

const handleClear = () => {
  emit('search', '');
};
// 分页参数
const currentPage = ref(1)     // 当前页码（pageNum）
const currentSize = ref(5)
const total = ref(0)
const newJobs=()=>{
  fetchJobList(1);
}
const jobList=ref([])
  // {
  //   jobName: '高级UI产品设计师（深圳）',
  //   maxSalary: '13K',
  //   minSalary: '7K',
  //   experience: '3-5年',
  //   education: '不限',
  //   createTime: '2018年11月24日',
  //   companyName: '京东数科',
  //   industry: 'IT|通信|电子|互联网',
  //   contact:'张三',
  //   phone: '+86 13888888888',
  // }
const baseUrl = 'http://localhost:9092';
  const searchQuery=ref(
      {
        jobName: '',
        companyName: '',
      }
  )
// 获取岗位列表
const fetchJobList = (status) => {
  // let data = qs.stringify(jobList.value)
  axios.get('http://localhost:9092/v1/job/list/1/', {
    //第一步:查询数据之前需要把当前页码以及每页显示多少条传给服务器
    params: {
      pageNum: currentPage.value,
      pageSize: currentSize.value
    }
  })

      .then(response => {
        console.log(response.data);
        // 成功获取数据后赋值给 jobList
        if (response.data.state==200) {
          const pageData = response.data.data;
          console.log('查看PageData返回的数据:')
          console.log(response.data)
          const currentIds = response.data.data.list.map(item => item.id);
          console.log('当前页所有 id 列表:', currentIds);
          // 将 data 数组映射为 jobList 所需格式
          const mappedList = response.data.data.list.map(item => ({

            positionName: item.jobName,
            positionType: item.positionType,
            location: item.location,
            min_salary: item.minSalary,
            max_salary: item.maxSalary,
            experience: item.experience,
            education: item.education,
            companyName: item.companyName,
            industry: item.industry,
            contact: item.contact,
            phone: item.phone,
            id: item.id,
            status: item.status,
            img: baseUrl+item.recruitImgUrl,
            createTime: item.createTime,

            // 以下是补充的字段
            cityName: item.cityName,
            companyId: item.companyId,
            description: item.description,
            environment: item.environment,
            gender: item.gender,
            isReward: item.isReward,
            isSalary: item.isSalary,
            isUrgency: item.isUrgency,
            jobExplain: item.jobExplain,
            payMode: item.payMode,
            requirements: item.requirements,
            rest: item.rest,
            salary: item.salary,
            updateTime: item.updateTime,
            welfare: item.welfare,
            boss: item.boss,
            email: item.email,
            bossExperience: item.bossExperience,
            scale: item.scale,
          }));
          jobList.value = mappedList;
          total.value = pageData.total; // 设置总条数

          ElMessage.success('获取岗位列表成功')
        }
      })
      .catch(error => {
        console.error('请求岗位列表失败:', error)
      })
}
const handleSizeChange = (newSize) => {
  currentSize.value = newSize;
  fetchJobList(); // 切换每页数量后重新请求
}

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  fetchJobList(); // 切换页码后重新请求
}
onMounted(()=>{
  fetchJobList(1);
})
const addInterest = () => {
  console.log("添加收藏");
};
// 格式化岗位列表，添加 formattedSalary 和 createTime
const formattedJobList = computed(() =>
    jobList.value.map(item => {
      const date = new Date(item.createTime); // 解析原始时间
      const year = date.getFullYear();
      const month = date.getMonth() + 1; // 月份从0开始
      const day = date.getDate();

      return {
        ...item,
        formattedSalary: `${Math.floor(item.min_salary / 1000)}K-${Math.floor(item.max_salary / 1000)}K`,
        publishDate: `${year}年${month}月${day}日`
      };
    })
)

</script>

<style scoped>
.property-item {
  width: 100%;
  background-color: #ffffff;
  margin: 2px auto;
  box-shadow: 5px 5px 10px 0 rgba(232, 255, 254, 0.3);
  transition: box-shadow 0.3s ease; /* 添加过渡效果 */
}

.property-item:hover {
  box-shadow: 0 0 15px rgba(232, 255, 254, 0.3); /* 绿色调的阴影 */
  transform: translateY(-1px); /* 可选：轻微上浮效果 */
}
.search-container {
  max-width: 800px;

  margin: 20px auto;
}

:deep(.el-input ){
  border-radius: 20px;
  overflow: hidden;
}

:deep(.el-input-group__append) {
  background-color: var(--el-color-primary);
  color: white;
  border: none;
  cursor: pointer;
}

:deep(.el-input-group__append:hover) {
  background-color: var(--el-color-primary-light-3);
}
</style>